<template>
  <div id="home">
    <div class="home-flex">
      <nav-bar class="home-nav">
        <div slot="center">ShoppingMall</div>
      </nav-bar>
      <nav-bar class="home-search">
        <input slot="center" type="text" placeholder="请输入搜索内容">
        <img slot="left" src="~assets/img/search_classify.png" @click="toClassify">
        <button slot="right">搜索</button>
      </nav-bar>
    </div>
    <recommend-list :lists="lists" :goodsList="goodsList"></recommend-list>
    <tab-control :tabControlList="['推荐','流行','精选']"></tab-control>
   <h3 style="text-align: center;margin-bottom: 60px">已经滑到底啦!!!还想看？</h3>


  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import {getClassifyData,getHomeList} from "network/home";
import RecommendList from "components/common/recommend/RecommendList";
import TabControl from "components/content/tabcontrol/TabControl";
export default {
  name: "Home",
  data(){
    return {
      goodsList: [],
      lists: [],
    }
  },
  components: {
    NavBar,
    RecommendList,
    TabControl
  },
  created() {
    //请求推荐列表
    getHomeList().then(res => {
      this.lists = res.data.list;
      // console.log(res.data.list[1].title);
    }).catch(err => {
      console.log(err);
    });
  },
  methods: {
    toClassify(){
      //  跳转到分类页面函数
      this.$router.replace("/classify");
    }
  }
}
</script>

<style scoped>
.home-flex{
  position: sticky;
  top: 0;
}
.home-nav{
  font-size: 20px;
  background-color: #d4237a;
  color: #EEEEEE;
}
.home-search{
  background-color: aquamarine;
}
.home-search input{
  width: 100%;
  height: 28px;
  text-align: center;
  border-radius: 15px;
  border: 0;
  outline: none;
  /*background-color: rgba(0, 0, 0, 0);*/
}
.home-search img{
  width: 30px;
  height: 30px;
  vertical-align: middle;
  margin-top: -3px;
}
.home-search button{
  height: 25px;
  color: #EEEEEE;
  font-size: 14px;
  background-color: #e93b3d;
  border-radius: 4px;
  border: 0;
}
</style>
